<template>
  <div class="equipadd-box scrllor">
    <router-link to="/admin/equip">
      <div id="tixian">返回</div>
    </router-link>
    <div class="add-box">
      <div class="title-box">
        <p>设备编号</p>
      </div>
      <div>
        <input type="number" class="my-input" maxlength="8" :disabled="this.id" v-model="add.id"/>
      </div>
    </div>
    <div class="add-box">
      <div class="title-box">
        <p>设备名称</p>
      </div>
      <div>
        <input type="text" class="my-input" maxlength="15" v-model="add.name"/>
      </div>
    </div>
    <div class="add-box">
      <div class="title-box">
        <p>sim卡</p>
      </div>
      <div>
        <input type="text" class="my-input" maxlength="20" v-model="add.simCard"/>
      </div>
    </div>
    <div class="add-box">
      <div class="title-box">
        <p>sim卡到期时间</p>
      </div>
      <div>
        <input type="text" class="my-input" @click="timeshow=true" v-model="add.simDueTime"/>
      </div>
    </div>
    <div class="add-box">
      <div class="title-box">
        <p>投放地址</p>
      </div>
      <div class="small-input-box">
        <input
          type="text"
          class="my-input small-input"
          v-model="area.provinces"
          placeholder="省"
          readonly
          @click="addshow=true"
        />
        <input
          type="text"
          class="my-input small-input"
          v-model="area.city"
          placeholder="市"
          readonly
          @click="addshow=true"
        />
        <input
          type="text"
          class="my-input small-input"
          style="margin-right:0"
          placeholder="区"
          readonly
          v-model="area.area"
          @click="addshow=true"
        />
      </div>
      <div v-if="xiaoquList">
        <input
          type="text"
          class="my-input"
          v-model="area.xiaoqu"
          readonly
          placeholder="详细小区"
          @click="showXiaoQu"
        />
      </div>
      <div v-else>
        <input
          type="text"
          class="my-input"
          v-model="plotName"
          placeholder="详细小区"
        />
      </div>
    </div>
    <div class="add-box">
      <div class="title-box">
        <p>设备类型</p>
      </div>
      <div>
        <input
          type="text"
          class="my-input"
          readonly
          v-model="add.cpFeeType"
          @click="cpFeeTypeShow=true"
        />
      </div>
    </div>
    <div class="add-box">
      <div class="title-box">
        <p>运行状态</p>
      </div>
      <div>
        <input
          type="text"
          class="my-input"
          readonly
          v-model="add.runningStatusName"
          @click="runningStatusShow=true"
        />
      </div>
    </div>
    <div class="button">
      <mu-button class="blur-btn btn" @click="submit">确定</mu-button>
    </div>

    <van-popup v-model="addshow" position="bottom" class="bottom-picker">
      <van-area
        cancel-button-text=" "
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
        title="请选择地区"
        @confirm="cityChange"
      />
    </van-popup>
    <van-popup v-model="xiaoquShow" position="bottom" class="bottom-picker">
      <van-picker
        :columns="xiaoquList"
        @confirm="xiaoquChange"
        show-toolbar
        title="请选择小区"
        cancel-button-text=" "
      />
    </van-popup>
    <van-popup v-model="cpFeeTypeShow" position="bottom" class="bottom-picker">
      <van-picker
        :columns="cpFeeTypeList"
        @confirm="cpFeeTypeChange"
        show-toolbar
        title="请选择收费类型"
        cancel-button-text=" "
      />
    </van-popup>
    <van-popup v-model="runningStatusShow" position="bottom" class="bottom-picker">
      <van-picker
        :columns="runningStatusList"
        @confirm="runningStatusChange"
        show-toolbar
        title="请选择运行状态"
        cancel-button-text=" "
      />
    </van-popup>
    <van-popup v-model="timeshow" position="bottom" class="bottom-picker">
      <van-datetime-picker
        type="datetime"
        v-model="currentDate"
        @confirm="confirmTimeChange"
        @cancel="timeshow=false"
      />
    </van-popup>
  </div>
</template>

<script>
    import Vue from "vue";
    import {Popup} from "vant";
    import {Area} from "vant";
    import "vant/lib/popup/style/index";
    import {Toast} from "vant";
    import "vant/lib/toast/style/index";
    import "vant/lib/area/style/index";
    import {Picker} from "vant";
    import {DatetimePicker} from "vant";
    import {formatDate} from "../../../utils/formart";

    Vue.use(DatetimePicker);

    Vue.use(Area);
    Vue.use(Picker);
    Vue.use(Popup);
    import province_list from "@/utils/area.js";

    Toast.setDefaultOptions({duration: 600});
    export default {
        data() {
            return {
                id: this.$route.params.id,
                addshow: false,
                timeshow: false,
                xiaoquShow: false,
                cpFeeTypeShow: false,
                runningStatusShow: false,
                plotName: "",
                areaList: province_list,
                currentDate: new Date(),
                area: {
                    provinces: "",
                    city: "",
                    area: "",
                    citypolt: "",
                    xiaoqu: ""
                },
                xiaoquList: [],
                cpFeeTypeList: [],
                runningStatusList: [
                    {"code": 0, "text": "运行"},
                    {"code": 1, "text": "离线"}
                ],
                add: {
                    id: "",
                    name: "",
                    xiaoquId: "",
                    cpFeeType: "",
                    cpFeeTypeid: "",
                    simCard: "",
                    simDueTime: "",
                    runningStatus: "",
                    runningStatusName: ""
                },
                show: {
                    province: false
                },

                data: {
                    provinces: []
                }
            };
        },
        methods: {
            showAddress() {
                this.addshow = true;
            },
            showXiaoQu() {
                if (this.area.citypolt != "") {
                    if (this.xiaoquList == "") {
                        Toast("暂无该地区小区数据");
                    } else {
                        this.xiaoquShow = true;
                    }
                }
            },
            cityChange(v) {
                console.log(v)
                this.area.provinces = v[0].name;
                this.area.city = v[1].name;
                this.area.area = v[2].name;
                this.area.citypolt = v[2].code;
                this.getPlotList(this.area.citypolt);
                this.addshow = false;
            },
            getPlotList(citypolt) {
                this.$api.getPoltList(citypolt).then(res => {
                    if (res.data.data == "") {
                        this.xiaoquList = "";
                        this.area.xiaoqu = "";
                    } else {
                        let a = JSON.stringify(res.data.data)
                            .replace(/plotName/g, "text")
                            .replace(/plotCode/g, "poid");
                        let b = JSON.parse(a);

                        this.xiaoquList = b;
                        let custom = {code: "custom", text: "输入自定义小区"}
                        this.xiaoquList.push(custom)
                    }
                });
            },
            xiaoquChange(v) {
                if (v.code == 'custom') {
                    this.xiaoquList = ""
                } else {
                    this.area.xiaoqu = v.text;
                    this.add.xiaoquId = v.id;
                    this.plotName = '';
                }
                this.xiaoquShow = false;

            },
            cpFeeTypeChange(v) {
                this.add.cpFeeType = v.text;
                this.add.cpFeeTypeid = v.code;
                this.cpFeeTypeShow = false;
            },
            confirmTimeChange(v) {
                this.add.simDueTime = formatDate(v, "yyyy-MM-dd hh:mm:ss");
                this.timeshow = false
            },
            runningStatusChange(v) {
                this.add.runningStatusName = v.text;
                this.add.runningStatus = v.code;
                this.runningStatusShow = false;
            },
            editPile() {
                this.$api
                    .editPile({
                        id: this.add.id,
                        pkname: this.add.name,
                        plot: this.add.xiaoquId,
                        plotName: this.plotName,
                        regionCode: this.area.citypolt,
                        cpFeeType: this.add.cpFeeTypeid,
                        simCard: this.add.simCard,
                        simDueTime: this.add.simDueTime,
                        runningStatus: this.add.runningStatus
                    })
                    .then(res => {
                        if (res.data.code == -1) {
                            Toast(res.data.message);
                        } else {
                            Toast("修改成功");
                            this.$router.push({
                                path: "/admin/equip"
                            });
                        }
                    });
            },
            submit() {
                if (this.add.id == "" || this.add.id.length < 8) {
                    Toast("请输入正确充电桩编号");
                    return;
                }
                if (this.add.name == "") {
                    Toast("请输入充电桩名");
                    return;
                }
                if (this.add.xiaoquId == "" && this.plotName == '') {
                    Toast("请选择充电桩所在小区");
                    return;
                }
                if (this.add.cpFeeTypeid == "") {
                    Toast("请选择充电桩收费类型");
                    return;
                }
                if (this.plotName) {
                    this.add.xiaoquId= null
                }
                if (this.id) {
                    this.editPile()
                } else {
                    this.$api
                        .addPile({
                            id: this.add.id,
                            pkname: this.add.name,
                            plot: this.add.xiaoquId,
                            plotName: this.plotName,
                            regionCode: this.area.citypolt,
                            cpFeeType: this.add.cpFeeTypeid,
                            simCard: this.add.simCard,
                            simDueTime: this.add.simDueTime,
                            runningStatus: this.add.runningStatus
                        })
                        .then(res => {
                            if (res.data.message.code == -1) {
                                Toast(res.data.message.message);
                            } else {
                                Toast("添加成功");
                                this.$router.push({
                                    path: "/admin/equip"
                                });
                            }
                        });
                }
            },

        },

        mounted() {
            this.$api.getAreaList().then(res => {
                this.areaList = res.data.data
                console.log(this.areaList)
            });
            this.$api.getProvinceList().then(res => {
                console.log(res);
                let a = JSON.stringify(res.data.data)
                    .replace(/name/g, "text")

                let b = JSON.parse(a);


                this.ProvinceList = b;
            });
            this.$api.getCodesByParent(2).then(res => {
                console.log(res);
                let a = JSON.stringify(res.data.data).replace(/codeName/g, "text");

                let b = JSON.parse(a);

                this.cpFeeTypeList = b;
            });
            if (this.id) {
                this.$api.getDevice(this.id).then(res => {
                    var device = res.data.data
                    this.add.id = device.id
                    this.add.name = device.pkname
                    this.add.cpFeeTypeid = device.cpFeeType
                    this.area.provinces = device.province;
                    this.area.city = device.city;
                    this.area.area = device.regionName;
                    this.area.citypolt = device.regionCode;
                    this.getPlotList(this.area.citypolt);
                    this.area.xiaoqu = device.plotName;
                    this.add.xiaoquId = device.plot
                    this.add.simCard = device.simCard
                    this.add.simDueTime = device.simDueTime
                    this.currentDate = device.simDueTime
                    this.add.runningStatus = device.runningStatus
                    this.runningStatusList.forEach(e => {
                        if (e.code == device.runningStatus) {
                            this.add.runningStatusName = e.text
                        }
                    })
                    this.cpFeeTypeList.forEach(e => {
                        if (e.code == device.cpFeeType) {
                            this.add.cpFeeType = e.text
                        }
                    })

                });

            }
        }
    };
</script>

<style>
</style>
